﻿<UserControl x:Class="UI.Core.View.Spinner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <SolidColorBrush x:Key="SpinnerRectangleBrush" Color="#FF06a8de"/>
        <Style TargetType="Rectangle">
            <Setter Property="RadiusX" Value="9"/>
            <Setter Property="RadiusY" Value="5"/>
            <Setter Property="Width" Value="10"/>
            <Setter Property="Height" Value="10"/>
            <Setter Property="Fill" Value="{StaticResource SpinnerRectangleBrush}"/>
            <Setter Property="Canvas.Left" Value="220"/>
            <Setter Property="Canvas.Top" Value="140"/>
            <Setter Property="Opacity" Value="0.1"/>
        </Style>
        <Storyboard x:Key="canvasAnimation">
            <DoubleAnimationUsingKeyFrames 
               RepeatBehavior="Forever" 
               SpeedRatio="16" 
               Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
                <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="22.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="45"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="67.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="112.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="135"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:7" Value="157.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="180"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:9" Value="202.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:10" Value="225"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:11" Value="247.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:12" Value="270"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:13" Value="292.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:14" Value="315"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:15" Value="337.5"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:16" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <TextBlock 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         Text=""/>
        <Canvas Height="300" Width="300" 
                Background="Transparent" 
                Name="canvas">
            <!-- First quadrant -->
            <Rectangle Opacity="1"/>
            <Rectangle>
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="22.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="45" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="67.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <!-- Second quadrant -->
            <Rectangle >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="90" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="112.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Name="r7">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="135" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="157.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <!-- Third quadrant -->
            <Rectangle Opacity="0.2">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="180" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.3">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="202.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.4" >
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="225" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="247.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <!-- Fourth quadrant -->
            <Rectangle Opacity="0.6">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="270" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.7">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="292.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.8">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="315" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle Opacity="0.9">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="337.5" CenterX="-70" CenterY="10"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Canvas.RenderTransform>
                <RotateTransform Angle="0" CenterX="150" CenterY="150"/>
            </Canvas.RenderTransform>
        </Canvas>
    </Grid>
</UserControl>
